<template>
	<div id="app">
		<div v-show="loading" class="loading">
			<van-loading color="#FFD719" size="24px" vertical>正在寻找美食中……</van-loading>
		</div>
		<div>
			<!-- 添加左侧个人列表展示动画 -->
			<van-popup v-model="$store.state.userPageShow" position="left" :style="{ height: '100%', width: '190px' }">
				<GlobalUser />
			</van-popup>
			<!-- 判断该页面是否需要缓存 -->
			<keep-alive>
				<router-view v-if="$route.meta.keepAlive"></router-view>
			</keep-alive>
			<router-view v-if="!$route.meta.keepAlive"></router-view>
		</div>
	</div>
</template>

<script>
import GlobalUser from './layouts/GlobalUser.vue';

export default {
	name: 'App',
	components: {
		GlobalUser,
	},
	computed: {
		loading() {
			return this.$store.state.loading;
		},
	},
};
</script>

<style>
@import url('@/assets/font/font_3433110_73upr8jvm8u/iconfont.css');
@import url('@/assets/css/style.css');
#app {
	width: 100%;
	height: 100vh;
}
.button {
	margin-bottom: 150px;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

li {
	list-style: none;
}
a {
	text-decoration: none;
}
.clearfix:before,
.clearfix:after {
	content: '';
	display: table;
}
/*清除浮动*/
.clearfix:after {
	clear: both;
}
.chearfix {
	*zoom: 1;
}

.loading {
	width: 100%;
	height: 100vh;
	display: flex;
	position: fixed;
	top: 0;
	z-index: 999;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #000000;
	opacity: 0.6;
}
</style>
